<template>
    <view>
        <view class="bg">
            <view class="item row">
                <view class="col_18">
                    <view class="type">923921</view>
                    <view class="time">{{' 2024年05月24日 14时57分'}}</view>
                </view>
                <view class="col_6">
                    已核销
                </view>
            </view>
        </view>
        <view class="mask" :class="showAnmMask" v-show="isShow" @click="closeExchange"></view>
		<view class="popup-box" :class="showAnm" v-show="isShow">
			<view class="popup-content">
				<view class="closeExchange" @click="closeExchange"></view>
				<view>
					<text>核销</text>
					<input type="text" v-model="exchangeValue" @input="handleInput" maxlength="6" placeholder="请输入核销码" />
					<view class="exchangeTips" :style="{ opacity: exchangeTips ? 1 : 0 }">{{ exchangeTips }}</view>
					<button @click="exchange">立即核销</button>
				</view>
			</view>
		</view>
        <view class="writebtn" @click="openExchange">
            核销
        </view>
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
    isShow:false,
    showAnmMask: '', // 遮罩过渡
    showAnm: '', // 动画
    exchangeValue:'',
    exchangeTips: '', // 错误提示
};
},
methods: {
    getwrite(){
        this.isShow = true
    },
    // 兑换卡密弹窗
		openExchange() {
			this.isShow = true;
			setTimeout(() => {
				this.showAnm = 'show';
				this.showAnmMask = 'showMask';
			}, 50);
		},
		closeExchange() {
			if(!this.isShow) return;
			this.exchangeTips = '';
			this.showAnm = '';
			this.showAnmMask = '';
			setTimeout(() => {
				this.isShow = false;
			}, 400);
		},
    handleInput(event) {
			// 移除输入值中的空格
			let inputValue = event.target.value.replace(/\s+/g, '');
			this.$nextTick(() => {
				this.exchangeValue = inputValue; // 更新输入值
			});
			if (!inputValue) {
				this.exchangeTips = '核销码不能为空';
				return;
			}
			if (inputValue.length < 6) {
				this.exchangeTips = '核销码为6位';
				return;
			}
			if (inputValue.length >= 6) {
				this.exchangeTips = '';
				return;
			}
		},
    async exchange() {
        let _this = this
			if (!this.exchangeValue) {
				this.exchangeTips = '核销码不可为空！';
				return;
			}
            uni.showModal({
				title: '温馨提示',
				content: '确定要核销吗',
				confirmText: '确定',
				success: async function (rs) {
					if (rs.confirm) {
						_this.isShow = false
					} else if (rs.cancel) {

					}
				}
			});
			
		}
},

}
</script>
<style lang='scss'>
.bg{
    width: 702rpx;
    background: #fff;
    border-radius: 16rpx;
    margin: 0 auto;
}
.item{
        height: 140rpx;
    align-items: center;
}
.row {
    display: flex;
    min-height: 50rpx;
    flex-wrap: wrap;
}
.col_18 {
    box-sizing: border-box;
    padding-left: 20rpx;
    .time {
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #999999;
    }
    .type {
      font-size: 32rpx;
      color: #333333;
      font-weight: bold;
    }
  }
  .col_6 {
    text-align: right;
    padding-right: 20rpx;
    box-sizing: border-box;
  }
.writebtn{
    width: 108rpx;
    height: 108rpx;
    border-radius: 50%;
    background-color: #706EEE;
    color: #fff;
    font-size: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}
.mask{
        position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
    overflow: hidden;
}
.showMask {
    opacity: 1;
}
.show {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1 !important;
}
// 卡密兑换内容区
.popup-box {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.9);
	z-index: 2;
	transition: 0.5s;
	opacity: 0;

	.popup-content {
		width: 600rpx;
		min-height: 400rpx;
		border-radius: 25rpx;
		overflow: hidden;
		background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717055258784842.png');
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		.closeExchange {
			width: 30rpx;
			height: 30rpx;
			display: block;
			background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717055268177371.png');
			background-repeat: no-repeat;
			background-size: cover;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		>view:last-child {
			width: 90%;
			// height: 320rpx;
			text-align: center;
			margin-top: 20rpx;

			text {
				font-weight: bold;
				font-size: 38rpx;
				color: #333;
			}

			input {
				background-color: #f6f6f6;
				color: #999999;
				height: 80rpx;
				border-radius: 20rpx;
				margin-top: 35rpx;
			}

			.exchangeTips {
				height: 40rpx;
				color: #f89595;
				background-color: #fef0f0;
				border-radius: 10rpx;
				width: 100%;
				font-size: 24rpx;
				padding: 5rpx 0;
				margin: 8rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: 1s;
			}

			button {
				background-color: #0d0d0d;
				color: white;
				border-radius: 50rpx;
				width: 80%;
				margin: 0 auto;
			}
		}
	}
}
</style>